<!-- 系统管理-日志管理 -->
<script setup lang="tsx">
import { SearchForm } from './components'
import { defaultPagingParams } from './index'
// import { PAGING } from '@/constant';
import type {
  LogInfo,
  LogQueryListParams,
  TableColumn,
} from '@/types'
import { queryList } from '@/api/modules/sysLog'
// ------------------use------------------
// #region
const { withLoading, loading } = useDefineLoading()
const [tableData, setTableData] = useState<any[]>([])
const [total, setTotal] = useState<number>(0)
// #endregion
// ------------------静态变量------------------
// #region
const columns: TableColumn<Required<LogInfo>>[] = [
  {
    key: uuid(),
    type: 'index',
    width: '80',
    label: '序号',
  },
  {
    key: uuid(),
    label: '时间',
    prop: 'getTime',
  },
  {
    key: uuid(),
    label: '用户',
    prop: 'accountName',
  },

  {
    key: uuid(),
    label: '请求行为',
    render({ row }) {
      const get = () => <el-tag>Get</el-tag>
      const post = () => (
        <el-tag type="success">Post</el-tag>
      )
      const put = () => <el-tag type="warning">Put</el-tag>
      const del = () => (
        <el-tag type="danger">Delete</el-tag>
      )
      const other = () => (
        <el-tag type="info">other</el-tag>
      )

      return row.methodType === 1
        ? get()
        : row.methodType === 2
          ? post()
          : row.methodType === 3
            ? put()
            : row.methodType === 4
              ? del()
              : other()
    },
  },
  {
    key: uuid(),
    label: '系统类型',
    prop: 'sysType',
    render({ row }) {
      return row.sysType === 1 ? 'web' : 'app'
    },
  },
  {
    key: uuid(),
    label: '响应',
    render({ row }) {
      return row.resType === 1 ? '正常' : '异常'
    },
  },
  {
    key: uuid(),
    label: '描述',
    render({ row }) {
      return `${row.modelName}-${row.methodDesc}`
    },
  },
]
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const pagingParams = ref<LogQueryListParams>({
  ...defaultPagingParams,
})
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region
// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
async function getTableData() {
  const params = { ...pagingParams.value }
  removeUnnecessaryParams(params)
  const { data: res } = await withLoading(queryList)(
    params,
  )
  if (!res) {
    setTotal(0)
    setTableData([])
    return
  }
  setTotal(res.total)
  setTableData(res.records)
}

// #endregion
</script>

<template>
  <div
    class="padding-sm flex-direction flex align-end container"
  >
    <view-table
      :loading="loading"
      :columns="columns"
      :data="tableData"
    >
      <template #actions>
        <SearchForm
          v-model:query="pagingParams"
          @search="getTableData"
          @reset="getTableData"
        />
      </template>
    </view-table>

    <!-- 分页 -->
    <ListsPagination
      v-model:page-num="pagingParams.pageNumber"
      v-model:page-size="pagingParams.pageSize"
      :total="total"
      @current-change="getTableData"
      @size-change="getTableData"
    />
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
